﻿{% extends "base.html" %}
{% block head %}

<script type="text/javascript">
	options_add={
		buttons:{"提交":function(){
							var username = $('#txt_userID').val();
							var departmentid = $("#selectDepartment").val();
							var usertype = $("#selectUserType").val();
							$.ajax({
								url:"/addUser/",
								data:"username="+username+"&departmentid="+departmentid+"&type=add&usertype="+usertype,
								method:'get',
								success:function(data){
											if(data == "success"){
												alert("添加成功！");$("#adduser").dialog("close");window.location.reload();
											}else{
												alert(data);
											}
										},
								error:function(jqXHR, textStatus, errorThrown){alert(errorThrown)}
							})
							},
					 "关闭":function(){$(this).dialog("close")}},
			width:500,
			title:"添加人员",
	}
	options_update={
		buttons:{"提交":function(){
							var username = $('#txt_userID').val();
							var departmentid = $("#selectDepartment").val();
							var usertype = $("#selectUserType").val();
							$.ajax({
								url:"/addUser/",
								data:"username="+username+"&departmentid="+departmentid+"&type=update&usertype="+usertype,
								method:'get',
								success:function(data){
											if(data == "success"){
												alert("更新成功！");$("#adduser").dialog("close");window.location.reload();
											}else{
												alert(data);
											}
										},
								error:function(jqXHR, textStatus, errorThrown){alert(errorThrown)}
							})
							},
					 "关闭":function(){$(this).dialog("close")}},
			width:500,
			title:"更新人员信息",
	}
    $(function(){
		$("#adduser").css("display","none");
		$("#btn_add").bind('click',fn_add)
	})
	
	/*
	* 添加部门
	*/
	function fn_add(){
		$("#txt_userID").val("").attr("disabled",false);
		$("#txt_userName").val("");
		$("#adduser").css("display","block").dialog(options_add);
	}
	/*
	* 修改人员
	*/
	function fn_update(userName,departID,userType){
		$("#txt_userID").val(userName).attr("disabled",true);
		$("#selectDepartment").val(departID);
		$("#selectUserType").val(userType);
		$("#adduser").css("display","block").dialog(options_update);
	}
	/*
	* 删除人员
	*/
	function fn_del(userid){
		$.ajax({
			url:"/delUser/",
			data:"username="+userid,
			method:"get",
			success:function(data){
						if(data == "success"){
							alert("删除成功！");
							window.location.reload();
						}
						else if(data=="fail"){
							alert("删除失败！");
						}
						else{
							alert("人员ID异常！"+data);
						}
					},
			error:function(jqXHR, textStatus, errorThrown){alert(errorThrown)}
		})
	}
	
</script>
{% endblock %}
{% block content %}
<form action="" method="get">
    {% csrf_token %}
	<button type="button" class="btn btn-primary" style="float:right;" id="btn_add" >添&nbsp; &nbsp;加</button>
	<div style="margin-bottom:2px;"></div>
    <table class="table table-striped">
    	<tr>
    		<td>用户名</td>
    		<td>所属部门</td>
			<td>用户类型</td>
    		<td>修改</td>
    		<td>删除</td>
    	</tr>
		{% for item in result %}
    	<tr>
    		<td>{{item.UserName}}</td>
    		<td>{{item.Departments.DepartmentName}}</td>
			<td>{{item.UserType.UserTypeName}}</td>
			<td><a onclick="fn_update('{{ item.UserName}}','{{item.Departments.DepartmentID}}','{{item.UserType.UserTypeID}}')">修改</a></td>
			<td><a onclick="fn_del('{{item.UserName}}')">删除</a></td>
    	</tr>
		{% endfor %}
    </table>
	<div id="adduser" class="form-horizontal">
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
			<div class="col-sm-8">
				<input type="email" class="form-control" id="txt_userID" placeholder="用户名">
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-3 control-label">所属部门</label>
			<div class="col-sm-8">
				<select id="selectDepartment" class="selector form-control">
					{% for depart in departments %}
					<option value="{{ depart.DepartmentID }}">{{depart.DepartmentName}}</option>
					{% endfor %}
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-3 control-label">用户类型</label>
			<div class="col-sm-8">
				<select id="selectUserType" class="selector form-control">
					{% for depart in usertypes %}
					<option value="{{ depart.UserTypeID }}">{{depart.UserTypeName}}</option>
					{% endfor %}
				</select>
			</div>
		</div>
	</div>
</form>
{% endblock %}